<template>
  <div class="askRend">
    <header>
      <i
        class="iconfont icon-angle-left"
        @click="
          () => {
            $router.go(-1);
          }
        "
      ></i>
      <h3>求租</h3>
      <p>
        <i class="iconfont icon-gengduo"></i>
        <i class="iconfont icon-play1"></i>
      </p>
    </header>
    <main>
      <div class="nav">
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="value1"
            :options="option1"
            @change="handleChange"
          >
          </van-dropdown-item>
          <van-dropdown-item
            v-model="value2"
            :options="option2"
            @click="handleArea"
          />
        </van-dropdown-menu>
      </div>
      <div class="content">
        <dl>
          <dt>
            <li>
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202001%2F12%2F20200112112216_fqtps.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633049973&t=dca4ff72bee77ea59fd97f97242e9190"
                alt=""
              />
              <p><span>话花</span> <span>上午9：00</span></p>
            </li>
            <p>国发股份华国锋挂钩浮动瑟</p>
          </dt>
          <dd>
            <p>
              <span>意向区域：上海</span><span>意向价格：<b>18000/月</b></span>
            </p>
            <p>
              <i class="iconfont icon-xiaoxi" @click="goDetail"></i>
              <i class="iconfont icon-dianhua"></i>
            </p>
          </dd>
        </dl>
        <dl v-for="(v, i) in arr.length ? arr : list" :key="i">
          <dt>
            <li>
              <img :src="v.userImg" alt="" />
              <p>
                <span>{{ v.name }}</span> <span>{{ v.time }}</span>
              </p>
            </li>
            <p>{{ v.title }}--{{ v.roomType }}</p>
          </dt>
          <dd>
            <p>
              <span>意向区域：{{ v.area }}</span
              ><span
                >意向价格：<b>{{ v.price }}/月</b></span
              >
            </p>
            <p>
              <i class="iconfont icon-xiaoxi" @click="goDetail(v)"></i>
              <i class="iconfont icon-dianhua" @click="goCall"></i>
            </p>
          </dd>
        </dl>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      list: [], /// 列表数据
      arr: [], /// 筛选
      value1: 0,
      value2: "a",
      option1: [
        { text: "房产类型", value: 0 },
        { text: "多层住宅", value: 1 },
        { text: "高层住宅", value: 2 },
        { text: "小高层住宅", value: 3 },
        { text: "商铺/门面房", value: 4 },
        { text: "厂房", value: 5 },
        { text: "写字楼", value: 6 },
        { text: "独院/别墅", value: 7 },
        { text: "车库", value: 8 },
      ],
      option2: [
        { text: "区域选择", value: "a" },
        { text: "海淀区", value: "b" },
        { text: "奉贤区", value: "c" },
        { text: "昌平区", value: "d" },
        { text: "浦东区", value: "e" },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleChange(value) {
      this.value1 = value;
      console.log(this.value1);
      // axios.get('/selectData', { roomType: value }).then((res) => {
      //   console.log(res, 'selectData')
      //   this.list = res.data.data
      // })
      if (value === 0) {
        this.arr = this.list.filter((item) => item.roomType === "房产类型");
      } else if (value === 1) {
        this.arr = this.list.filter((item) => item.roomType === "多层住宅");
      } else if (value === 2) {
        this.arr = this.list.filter((item) => item.roomType === "高层住宅");
      } else if (value === 3) {
        this.arr = this.list.filter((item) => item.roomType === "小高层住宅");
      } else if (value === 4) {
        this.arr = this.list.filter((item) => item.roomType === "商铺/门面房");
      } else if (value === 5) {
        this.arr = this.list.filter((item) => item.roomType === "厂房");
      } else if (value === 6) {
        this.arr = this.list.filter((item) => item.roomType === "写字楼");
      } else if (value === 7) {
        this.arr = this.list.filter((item) => item.roomType === "独院/别墅");
      } else if (value === 8) {
        this.arr = this.list.filter((item) => item.roomType === "车库");
      } else {
        this.arr = [];
        this.getList();
      }
    },
    handleArea(value) {
      if (value === "b") {
        /// 区域选择
        this.arr = this.list.filter((item) => item.area === "海淀区");
      } else if (value === "c") {
        this.arr = this.list.filter((item) => item.area === "奉贤区");
      } else if (value === "d") {
        this.arr = this.list.filter((item) => item.area === "昌平区");
      } else if (value === "e") {
        this.arr = this.list.filter((item) => item.area === "浦东区");
      } else {
        this.arr = [];
        this.getList();
      }
    },
    getList() {
      /// 求租
      axios.get("/getRentHoust").then((res) => {
        this.list = res.data.data;
        console.log(res, "home");
        console.log({ ...this.list }, "area");
      });
    },
    goDetail(v) {
      /// 跳转详情页
      window.sessionStorage.setItem("obj", JSON.stringify(v));
      this.$router.push("/response");
    },
    goCall() {
      /// 拨号键盘页
      this.$router.push("/context");
    },
  },
};
</script>

<style lang='scss' scoped>
.askRend {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 45px;
    background-color: skyblue;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    color: #fff;
    h3 {
      font-weight: normal;
    }
    p {
      width: 80px;
      padding: 2px 10px;
      display: flex;
      justify-content: space-around;
      border: 1px solid #eee;
      border-radius: 15px;
    }
  }
}
main {
  flex: 1;
  overflow-y: scroll;
  background-color: #eee;
  .nav {
    width: 100%;
    height: 50px;
    position: sticky;
    top: 0;
    left: 0;
    ul {
      width: 100%;
      height: 150px;
      background-color: #fff;
    }
  }
}
.content {
  flex: 1;
  dl {
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #eee;
    padding: 0 5px;
    background-color: #fff;
    margin-bottom: 15px;
    dt {
      width: 100%;
      height: 80px;
      border-bottom: 1px solid #eee;
      img {
        width: 35px;
        height: 35px;
        margin: 0 10px;
        border-radius: 50%;
      }
      li {
        height: 45px;
        display: flex;
        align-items: center;
        p {
          flex: 1;
          display: flex;
          justify-content: space-between;
          padding: 0 5px;
        }
      }
      p {
        height: 35px;
        line-height: 35px;
      }
    }
    dd {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p {
        font-size: 15px;
        span {
          margin: 0 5px;
          b {
            color: #f00;
            font-size: 13px;
          }
        }
        i {
          width: 30px;
          padding: 5px;
          border-radius: 50%;
          margin: 0 3px;
          background-color: pink;
          color: #f00;
          text-align: center;
          border: 1px solid #eee;
          display: inline-block;
        }
      }
    }
  }
}
</style>
